iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 18
0
Modern Web

前端影片與直播筆記系列 第 18

Day18 clappr 播放器

  • 分享至 

  • xImage
  •  

今天來介紹 clappr 播放器

clappr 是一款開源播放器,並可透過 Plugin 支援RTMP、DASH 與 FLV ,這個播放器的特色是:

  1. Github 4419 顆星星
  2. Plugin 豐富
  3. 可透過 Plugin 支援多種格式、協議影片 ( MP4、FLV、HLS、webm、DASH..etc )
  4. 可在 HTML5、Flash 間切換
  5. 文件齊全

安裝、引入 clappr

CDN

<script src="https://cdn.jsdelivr.net/npm/clappr@latest/dist/clappr.min.js" type="text/javascript" ></script>

建立 clappr 物件

HTML

<div id="player"></div>

JS

const player = new Clappr.Player({
  source: "http://www.html5videoplayer.net/videos/toystory.mp4", 
  parentId: "#player"
});

說明:
建立Clappr播放器的方式很簡單,new 一個新 Clappr.Player物件 ,在 new 的時候傳入一個物件,可以替該物件帶入其他 config 屬性參數,這裡以 sourceparentId 為例。

parentId屬性值為HTML欲綁定 <Tag> 的 id,如果不傳入parentId屬性,
也可在new Clappr.Player()下面用

Clappr物件.attachTo( 欲綁定DOM節點 );

的寫法。

config 有一些參數可選:

屬性 型態 描述
source (字串)影片路徑 影片路徑
poster (字串)圖片路徑 影片播放前的靜態圖片路徑
width 數值 播放器寬度
height 數值 播放器高度
autoPlay true、false 是否自動播放 ( 預設 false )
preload true、false 是否在背景預先加載影片
mute true、false 是否靜音
persistConfig true、false 是否以 localStorage 記錄當前音量大小(下次載入其他影片時聲音大小會保留)
events 物件(見下面說明) 事件監聽
其他可帶入屬性文件見此
至此影片便建立完成。

事件 Events

clappr 的事件 API 也很簡單,可以在new Clappr.Player()建立物件時,在裏頭帶入 events 屬性,其值為一個物件,該物件中能帶入監聽事件觸發時執行的 callback 函式。

const player = new Clappr.Player({
  events: {
    onReady: () => { //...做某件事 }, 
    onPause: () => { //...做某件事 }
  }
})

這裡列出幾個常用的 Event 事件

事件名 描述
onReady 播放器初始化建立完觸發
onPlay 播放時觸發
onPause 暫停時觸發
onSeek 滑動時間條時觸發
onEnded 播放結束時觸發
onError 播放出錯(載入或程式錯誤)觸發
其他可帶入事件與callback文件見此

方法 Methods

clappr 也提供了不少方法,這裡列出幾個常用的:

方法 描述
.play( ) 播放
.pause( ) 暫停
.stop( ) 停止
.mute( ) 靜音
.isPlaying( ) 檢查是否播放(回傳true或false)
.load( src ) src為影片連結,播放器會將影片連結切換成src

 
 
 
 
 
 
 
參考
clappr Github
clappr Events API
clappr Plugins


上一篇
Day 17 sewise-player 播放器
下一篇
Daty19 JWPLAYER 播放器
系列文
前端影片與直播筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言